<template>
    <div class="addWeibo">
        <div class="now_header">
            <div style="width: 28px;display: inline-block" @click = goBack>
                <img style="width: 100%" src="../assets/img/back.png">
            </div>
            <div style="width: 28px;display: inline-block;float: right" @click = sendMessage v-loading.fullscreen.lock= content.loading >
                <img style="width: 100%" src="../assets/img/send.png">
            </div>
        </div>
        <div class="main_input">
            <div style="text-align: left;margin-bottom: 20px">
                <div class="wb_icon"  >
                        <img src="../assets/img/photo.png" alt="" @click="open(1)">
                        <input type="file" id = "imgInput"  ref="photoIn" name = "file" multiple="multiple" accept="image/*"   style="display: none;" @change="selectFile(1)" />
                </div>
<!--                <div class="wb_icon"  >-->
<!--                    <img src="../assets/img/video.png" alt="" @click="open(2)">-->
<!--                    <input type="file" id = "videoInput" ref="videoIn" name = "file" accept="video/*"   style="display: none;" @change="selectFile(2)" />-->
<!--                </div>-->
<!--                <div class="wb_icon">-->
<!--                    <img src="../assets/emoji.png" alt="">-->
<!--                </div>-->
            </div>
            <div>
                <el-input
                v-model="content.text"
                :rows="5"
                class="weibo_ipuit"
                maxlength="100"
                type="textarea"
                show-word-limit
                placeholder="分享新鲜事..."
                />
            </div>
            <div  class="showImg">
                <div v-for="(item, index) in content.showImgList"   style="display: inline-block;margin-left: 10px;margin-right: 10px;position: relative">
                    <video style="width: 100px; height: 100px" v-if="item.type == 2"  autoplay loop :src= "item.value" ></video>
                    <el-image  style="width: 100px; height: 100px"  v-if="item.type == 1" :src="item.value"  :initial-index="index" fit="cover"  @click = "showPre(index)" />
                    <img src="../assets/img/xx.png" class="deleteImg" @click="deletePhoto(index)">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {get_user} from  "@/axios/login";
import {getCurrentInstance, onMounted, reactive, ref, unref} from "vue";
import {useRouter,useRoute} from 'vue-router'
import {send_wb, send_wb_file} from '@/axios/weibo'
import { showImagePreview } from 'vant';
import {whole_init} from  "@/util/Permission"


const photoIn = ref(null);
const videoIn = ref(null);

const router = useRouter();

const { proxy } = getCurrentInstance()

const content = reactive({
    imgLimit: 9,
    text :"",
    fileList: [],
    showImgList: [],
    loading : false
})


const open = (ab) => {


    let input = document.querySelector("#imgInput")
    if(ab == 2){
        input = document.querySelector("#videoInput")
    }

    input.click();
};
const showPre = (n) =>{
    let uu = []

    content.showImgList.forEach(e=>{
        uu.push(e["value"])
    })
    showImagePreview({
        images: uu,
        startPosition: n,
        loop:false
    });
}

const selectFile = (n)=>{
    let  files = []
    if (n == 1){
        files.push(unref(photoIn).files)
    }
    if (n == 2){
        files.push(unref(videoIn).files)
    }
    if(files.length + content.fileList.length > content.imgLimit){
        proxy.$message.error("当前只支持选择"+ content.imgLimit +"个文件")
        return
    }

    if(n == 1){

        Array.from(unref(photoIn).files).forEach((item) => {
            let ff = {
                type: "",
                value: ""
            }

            content.fileList.push(item)
            ff.type =  1
            ff.value = URL.createObjectURL(item)
            content.showImgList.push(ff)
        })
    }
    if (n == 2){
        let ff = {
            type: "",
            value: ""
        }
        content.fileList.push(unref(videoIn).files[0])
        ff.type =  2
        ff.value = URL.createObjectURL(unref(videoIn).files[0])
        content.showImgList.push(ff)
    }
    }

const deletePhoto = (n) =>{
    content.fileList.splice(n, 1)
    content.showImgList.splice(n, 1)
    unref(videoIn).value = null
}

const  goBack =() =>{
    router.push("/weibo")
}
const sendMessage = () =>{
    if(!content.text && content.fileList.length ==0){
        proxy.$message.warning("请填写内容")
        return
    }

    content.loading = true
    let formData = new FormData()
    if(content.text){
        formData.append("content" , content.text)
    }else {
        formData.append("content" , "分享图片")
    }
    if (content.fileList.length ==0){
        formData.append("hasFile" , false)
    }else {
        formData.append("hasFile" , true)
    }

    send_wb(formData).then(res =>{
        let wbId = res.data.data
        let reqs = []
        Array.from(content.fileList).forEach((e, inx)=>{
            let typpe = e.type.indexOf("image") >= 0 ? 1 : 2
            let formData2 = new FormData()
            formData2.append("id", wbId)
            formData2.append("file", e)
            formData2.append("type", typpe)
            formData2.append("order", inx)
            let req =  new  Promise((resolve, reject) => { send_wb_file(formData2).then(res =>{
                    resolve(res)
                }).catch(err=>{
                    reject(err)
                })
            })
            reqs.push(req)
        })

        Promise.all(reqs).then((val) => {
            console.log(val)
            router.push("/weibo")
        }).catch((err)=>{
            content.loading = false
        });
    }).catch(err=>{
        content.loading = false
    })
}


onMounted(() => {
    get_user().then(res=>{
       if(!whole_init(res.data.data.authorities).wb){
           router.push("/")
       }
    }).catch(err=>{

    })
})

</script>

<style scoped>
.now_header{
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: #5195FF;
    color:white;
    text-align: left;
    top: 0;
    left: 0;
    padding: 4px;
    box-sizing:border-box;
}

.addWeibo{
    height: 100%;
    padding-top: 62px;
    background-color: #FFFFFF;
}
.main_input{
    padding: 2px 2px;

}
.wb_icon{
    width: 28px;
    display: inline-block;
    margin-left: 10px;
}
.wb_icon img{
    width: 100%;
}
.showImg{
    margin-top: 20px;
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.deleteImg{
    width: 20px;
    position: absolute;
    right: -4px;
    top: -4px;
}

</style>